<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            height: 36px;
            width: 635px;
            font-size: 0;
        }

        a {
            font: 13px/34px "微软雅黑";
            width: 34px;
            height: 34px;
            display: inline-block;
            border: 1px solid #e1e2e3;
            text-align: center;
            text-decoration: none;
            margin-right: 9px;
        }

        a:hover, .active {
            background: #f2f8ff;
            border-color: #3388ff;
        }

        .page {
            width: 86px;
        }

        .next {
            margin-right: 0;
        }
    </style>
</head>
<body>
<div>
    <a href="#" class="page">上一页</a>
    <a href="#">1</a>
    <a href="#">2</a>
    <a href="#" class="active">3</a>
    <a href="#">4</a>
    <a href="#">5</a>
    <a href="#">6</a>
    <a href="#">7</a>
    <a href="#">8</a>
    <a href="#">9</a>
    <a href="#">10</a>
    <a href="#" class="page next">下一页</a>
</div>
</body>
</html>